<script setup lang="ts">
import { uploadActionAPI } from '@/apis/publish';
import GeekChannel from '@/components/GeekChannel.vue';
import type { PublishDataType } from '@/types/publish';
import { ArrowRight, Plus } from '@element-plus/icons-vue';
import type { ElUpload, FormInstance, FormRules, UploadRequestOptions } from 'element-plus';
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { ref } from 'vue';
const formRef = ref<FormInstance>()
// 参数
const articleForm = ref<PublishDataType>({
  title: '', // 文章标题
  content: '', // 文章内容
  cover: {
    // ⚠️ 注意：这里后端接口文档有误，type应该为number类型，否则提交表单报400参数类型错误
    type: 1, // 封面类型 -1:自动，0-无图，1-1张，3-3张
    images: [] // 封面图片数组
  },
  channel_id: undefined  // 文章频道id
})

// 图片上传
const uploadRef = ref<InstanceType<typeof ElUpload>>()
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
//上传图片
const uploadAction = async (obj: UploadRequestOptions) => {
  // 创建 FormData 对象，用于上传图片
  const fd = new FormData()
  // 注意：后端接口文档的字段要求
  fd.append('image', obj.file)
  const res = await uploadActionAPI(fd)
  console.log('res', res)
  // 将图片地址添加到数组中
  articleForm.value.cover.images.push(res.data.url)
  // 主动触发 cover 校验
  formRef.value?.validateField('cover')
  // 添加返回值，返回的图片地址会被记录到到文件的 response 属性上
  return res.data.url
}

// 切换封面类型
const changeCoverType = () => {
  // 清空已上传的文件列表
  uploadRef.value?.clearFiles()
  // 清空封面数组
  articleForm.value.cover.images = []
  // 调用自定义校验
  formRef.value?.validateField('cover')
}

// 校验规则 --------------------

// 自定义校验函数

const formRules = ref<FormRules<PublishDataType>>({
  title: [
    { required: true, message: '请输入文章标题', trigger: 'blur' },
    { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
  ],
  channel_id: [
    { required: true, message: '请选择文章频道', trigger: 'change' }
  ],
  cover: [
    {
      validator: (rule, value: PublishDataType['cover'], callback: (error?: Error) => void) => {
        if (value.type === 1 && value.images.length < 1) {
          return callback(new Error('请上传一张封面'))
        } else if (value.type === 3 && value.images.length < 3) {
          return callback(new Error('请上传三张封面'))
        }
        // 通过校验
        callback()
      },
      trigger: 'change'
    }
  ]
})

// 富文本
const richText = {
  toolbar: [
    'bold', // 粗体
    'italic', // 斜体
    'underline', // 下划线
    'strikeThrough', // 删除线
    'foreColor', // 文字颜色
    'backColor', // 背景颜色
    'link', // 插入链接
    'list', // 列表
    'justify', // 对齐方式
    'quote', // 引用
  ],
  placeholder: '请输入内容',
}
</script>

<template>
  <el-card shadow="always">
    <!-- 头部：面包屑 -->
    <template v-slot:header>
      <div>
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>发布文章</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </template>
    <!-- 主体：表单 -->
    <el-form ref="formRef" label-width="120px" :data="articleForm" :rules="formRules" :model="articleForm">

      <el-form-item label="标题：" prop="title">
        <el-input v-model="articleForm.title" placeholder="请输入文章标题" style="width:400px"></el-input>
      </el-form-item>

      <el-form-item label="频道：" prop="channel_id" style="max-width: 400px">
        <GeekChannel v-model="articleForm.channel_id"></GeekChannel>
      </el-form-item>

      <el-form-item label="封面：" prop="cover">
        <el-radio-group v-model="articleForm.cover.type" @change="changeCoverType">
          <el-radio :value="1">单图</el-radio>
          <el-radio :value="3">三图</el-radio>
          <el-radio :value="0">无图</el-radio>
          <el-radio :value="-1">自动</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <div v-if="articleForm.cover.type === 1 || articleForm.cover.type === 3">
          <!-- 预留上传组件 -->
          <el-upload action="" ref="uploadRef" list-type="picture-card" :http-request="uploadAction"
            :limit="articleForm.cover.type">
            <el-icon>
              <Plus />
            </el-icon>
          </el-upload>

          <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
          </el-dialog>
        </div>
      </el-form-item>

      <el-form-item label="内容：" >
        <div style="width: 100%;">
          <!-- 预留富文本编辑器组件 -->
          <QuillEditor v-model:content="articleForm.content" :options="richText" contentType="html"></QuillEditor>
        </div>
      </el-form-item>

      <el-form-item label="">
        <el-button type="primary">发表文章</el-button>
        <el-button>存入草稿</el-button>
        {{ articleForm }}
      </el-form-item>

    </el-form>
  </el-card>
</template>

<style scoped>
/*  在这里编写组件的样式 */
:deep(.ql-editor) {
  width: 100%;
  min-height: 300px;
}
</style>
